<template>
	<view>
		<nav-box :title="type == 1 ? '签到管理详情' : '培训管理详情'"></nav-box>
		<view class="content">
			<view class="examinee-top">
				<view class="search-box u-m-b-48">
					<u-search height="80" placeholder="搜索要操作的考生" v-model="searchVal" :show-action="false" @search="searchExam"></u-search>
				</view>
				<view class="exam-state">
					<view class="state-top">
						<text class="title">{{ info.title }}</text>
						<view class="top-right" @click="show = !show">
							<image src="../../../static/images/shuoming.png" mode=""></image>
							<text>考试须知</text>
						</view>
					</view>
					<view class="info-box">
						<text>时间：{{ info.date }} {{ info.startTime }} ~ {{ info.endTime }}</text>
						<text>预约/签到/总人数：{{ info.appointment }}/{{ info.sign }}/{{ info.count }}</text>
					</view>
				</view>
			</view>
			<view class="list-box">
				<text class="title">已签到人员</text>
				<view v-for="(item, index) in list" :key="index" v-show="!controlState">
					<view class="item-box">
						<view class="item-top">
							<text>{{ item.name }}</text>
							<text>学分{{item.score}}</text>
						</view>
						<view class="u-m-b-8">手机号：{{ item.username }}</view>
					</view>
				</view>
				<view v-show="controlState">
					<u-checkbox-group width="100%" :wrap="true" @change="checkboxGroupChange">
						<view class="item-box" v-for="(item, index) in list" :key="index">
							<u-checkbox @change="checkboxChange" v-model="item.checked" :name="item.name" shape="circle" size="48">
								<view class="item-top">
									<text>{{ item.name }}</text>
								</view>
								<view class="u-m-b-8">手机号：{{ item.username }}</view>
							</u-checkbox>
						</view>
					</u-checkbox-group>
				</view>
			</view>
		</view>
		<u-modal title="考试须知" v-model="show">
			<view class="wrap">
				<text v-if="info.notice">{{ content }}</text>
				<view class="u-text-center">
					<image src="../../../static/images/meiyoushuju.png" mode=""></image>
					<view>暂无内容</view>
				</view>
			</view>
		</u-modal>
		<view class="control-box">
			<block v-if="type == 1">
				<view class="control-item" v-show="!controlState" @click="toSign">
					<image src="../../../static/images/qiandao.png" mode=""></image>
					<text>补签到</text>
				</view>
				<view class="all-check" v-show="controlState">
					<u-checkbox size="48" shape="circle" v-model="allCheck" @change="checkedAll"><text>全选</text></u-checkbox>
				</view>
				<view class="control-item cancel-box" v-show="!controlState" @click="controlState = !controlState">
					<image src="../../../static/images/quxiao.png" mode=""></image>
					<text>取消资格</text>
				</view>
				<view class="control-item cancel-box" v-show="controlState" @click="disqualification">
					<image src="../../../static/images/quxiao.png" mode="" v-show="!controlState"></image>
					<text>取消资格</text>
				</view>
			</block>
			<block v-else>
				<view class="control-item" v-show="!controlState" @click="modalShow = !modalShow">
					<image src="../../../static/images/xingzhuang.png" mode=""></image>
					<text>签到码</text>
				</view>
				<view class="control-item" v-show="controlState" @click="checkedAll"><text>全部签退</text></view>
				<view class="control-item cancel-box" v-show="!controlState" @click="controlState = !controlState">
					<image src="../../../static/images/qiantui.png" mode=""></image>
					<text>签退</text>
				</view>
				<view class="control-item cancel-box" v-show="controlState" @click="disqualification">
					<image src="../../../static/images/quxiao.png" mode="" v-show="!controlState"></image>
					<text>签退</text>
				</view>
			</block>
		</view>
		<!-- 签到管理弹框 -->
		<u-modal
			v-if="type == 1"
			v-model="modalShow"
			:title="modalTitle"
			content="您确认取消此考生考试资格吗"
			cancel-color="	#2979ff"
			:show-cancel-button="true"
			@confirm="determine"
		></u-modal>
		<!-- 签退弹框 -->
		<u-modal v-else v-model="modalShow" title="" :content="info.password" cancel-color="#2979ff" :show-cancel-button="true" :confirm-text="controlState ? '确定' : '重新获取'" @confirm="getCode">
			<view class="modal-wrap">
				<view v-show="!controlState">
					<view class="u-m-b-20">签到码</view>
					<text>{{info.password}}</text>
				</view>
				<view v-show="controlState">
					<view class="u-m-b-20">请进行学分打分</view>
					<view class="add-box">
						<input type="number" maxlength="3" placeholder="请输入学分" adjust-position v-model="addScore">
						<text>分</text>
					</view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script>
export default {
	data() {
		return {
			addScore: null,
			modalTitle: '',
			type: null,
			modalShow: false,
			allCheck: false,
			show: false,
			searchVal: '',
			info: {},
			list: [],
			content: '',
			controlState: false, //操作状态
			checkList: [] // 用户的选择
		};
	},
	onLoad(options) {
		this.type = options.type;
		// 走接口获取上一页带过来的签到id
		this.info = {
			id: 1,
			title: this.type == 1 ? '训考1' : '培训1',
			date: '2021/9/01',
			startTime: '13:21',
			endTime: '15:21',
			count: 100, //总计人数
			appointment: 50, //预约人数
			sign: 20, //签到人数
			password: '2233', //考场密码
			notice: '' //考试须知
		};
		this.list = [
			{
				id: 1,
				name: '张三',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '优秀',
				score: 4,
				checked: false //资格是否被取消
			},
			{
				id: 16,
				name: '张三',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '优秀',
				score: 4,
				checked: false //资格是否被取消
			},
			{
				id: 15,
				name: '张三',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '优秀',
				score: 4,
				checked: false //资格是否被取消
			},
			{
				id: 14,
				name: '张三',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '优秀',
				score: 4,
				checked: false //资格是否被取消
			},
			{
				id: 13,
				name: '张三',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '优秀',
				score: 4,
				checked: false //资格是否被取消
			},
			{
				id: 2,
				name: '李四',
				username: '13546523369',
				state: 1,
				startTime: '2021/05/21 13:11',
				pz: '及格',
				score: 4,
				checked: false //资格是否被取消
			}
		];
	},
	methods: {
		// 搜索
		searchExam() {
			// 传参 this.searchVal
		},
		disqualification() {
			if (this.checkList.length > 0) {
				this.modalShow = true;
			} else {
				this.controlState = !this.controlState;
			}
		},
		// 选中某个复选框时，由checkbox时触发
		checkboxChange(e) {
			if (!e.value) {
				this.allCheck = false;
			}
		},
		// 选中任一checkbox时，由checkbox-group触发
		checkboxGroupChange(e) {
			this.checkList = e;
		},
		// 全选
		checkedAll() {
			this.allCheck = !this.allCheck;
			this.list.map(val => {
				val.checked = this.allCheck;
				if (this.allCheck) {
					this.checkList.push(val.id);
				} else {
					this.checkList = [];
				}
			});
		},
		// 取消资格
		determine() {
			// 走完接口的操作
			this.modalShow = this.allCheck = false;
			this.controlState = false;
			this.list.map(v => {
				v.checked = false;
			});
		},
		// 补签到
		toSign() {
			// 调取企业微信扫一扫
		},
		// 重新获取签到码或者签退
		getCode() {
			if (this.controlState) {
				
			} else {
				this.modalShow = true;
				// 走接口获取
				this.info.password = `${this._.random(1000, 9999)}`;
			}
		},
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #ffffff;
	padding-bottom: 150upx;
	.content {
		.examinee-top {
			padding: 20upx 0;
			border-bottom: 12upx solid #f7f7f9;
			.search-box {
				padding: 0 40upx;
			}
			.exam-state {
				padding: 0 40upx;
				color: #969696;
				.state-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 32upx;
					image {
						width: 24upx;
						height: 24upx;
						margin-right: 5upx;
					}
					.title {
						color: #4b4b4b;
						display: inline-block;
					}
					.top-right {
						display: inherit;
						align-items: center;
						color: $color-2d6;
						font-size: 24upx;
					}
				}
				.info-box {
					display: flex;
					flex-direction: column;
					text {
						display: block;
						margin-bottom: 20upx;
					}
				}
			}
		}
		.list-box {
			padding: 32upx 40upx;
			.title {
				color: #4b4b4b;
			}
			.check-label {
				width: 100%;
				display: flex;
				align-items: center;
			}
			.item-box {
				width: 100%;
				border-bottom: 2upx solid #f1f1f1;
				padding: 32upx 0;
				font-size: 24upx;
				color: #9d9d9d;
				.item-top {
					display: flex;
					align-items: center;
					justify-content: space-between;
					margin-bottom: 8upx;
					text {
						font-size: 32upx;
						color: #4b4b4b;
						&:nth-of-type(2) {
							font-size: 28upx;
							color: #6E6E6E;
						}
					}
				}
			}
		}
	}
	.wrap {
		padding: 28upx 48upx;
		min-height: 360upx;
		color: #959595;
		font-size: 28upx;
		line-height: 52upx;
		image {
			width: 216upx;
			height: 140upx;
			margin-bottom: 28upx;
		}
	}
	.control-box {
		width: 100%;
		box-sizing: border-box;
		padding: 40upx;
		position: fixed;
		bottom: 0;
		display: flex;
		background-color: #ffffff;
		.all-check {
			display: flex;
			align-items: center;
		}
		.control-item {
			width: 270upx;
			justify-content: center;
			align-items: center;
			display: flex;
			border: 2px solid #2d6eff;
			border-radius: 100upx;
			color: #2d6eff;
			padding: 26upx 0;
			image {
				width: 32upx;
				height: 32upx;
				margin-right: 4upx;
			}
		}
		.cancel-box {
			background-color: #2d6eff;
			color: #ffffff;
			margin-left: auto;
		}
	}
	.modal-wrap {
		padding: 28upx;
		text-align: center;
		.add-box {
			justify-content: center;
			display: flex;
			align-items: center;
			input {
				height: 80upx;
				background-color: #F2F2F2;
				text-align: center;
				width: 50%;
				font-size: 24upx;
				border-radius: 100upx;
				padding: 0 30upx;
				margin-right: 20upx;
			}
		}
	}
}
</style>
